Programmatic zoom controls

You can use the zoom API to implement your own zoom controls or to synchronize the zoom level with other components.

In this example we are using the zoom API to implement our own zoom controls. We are also using the zoom-change event to synchronize the zoom level with the controls.

By setting the viewer.zoom property the viewer will go into zoom mode. The zoom mode can be disabled by calling the viewer.zoomStop() method.

info

This interactive example demonstrates the concept using React. If you're using a different framework, adapt the core concepts to your preferred technology.

Result

Loading...

Live Editor

function Example() {
  const viewer = useRef(null);
  const [zoom, setZoom] = useState(3);
  const [x, setX] = useState(0.53);
  const [y, setY] = useState(0.67);
  useLayoutEffect(() => {
    viewer.current.addEventListener("ready", () => {
      viewer.current.zoom = zoom;
      viewer.current.zoomX = x;
      viewer.current.zoomY = y;
    });
    viewer.current.addEventListener("zoom-change", e => {
      setZoom(e.detail.zoom);
      setX(e.detail.x);
      setY(e.detail.y);
    });
  }, [viewer]);
  return (
    <>
      <div
        style={{
          position: "absolute",
          zIndex: 5,
          padding: "12px",
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: "6px",
        }}
      >
        <input
          type="range"
          min="1"
          max="10"
          step="any"
          value={zoom}
          onChange={e => (viewer.current.zoom = e.target.value)}
        />
        <label>Zoom: {Number(zoom).toFixed(2)}</label>

        <input
          type="number"
          min="0"
          max="1"
          step="0.01"
          value={x.toFixed(2)}
          onChange={e => (viewer.current.zoomX = e.target.value)}
        />
        <label>X</label>

        <input
          type="number"
          min="0"
          max="1"
          step="0.01"
          value={y.toFixed(2)}
          onChange={e => (viewer.current.zoomY = e.target.value)}
        />
        <label>Y</label>
      </div>

      <cylindo-viewer
        ref={viewer}
        customer-id="5098"
        code="VARIABLE PLUS TEST"
        controls=""
      >
        <cylindo-360-frame frame="5" />
      </cylindo-viewer>
    </>
  );
}

tip

You can programmatically hide the zoom buttons when they're not supported by the currently displayed item, by listening to the canBeZoomedIn item attribute. This value can be accessed from the item property and the item-change event.

tip

We are using spring physics internally to animate the zoom properties. Consider using something similar if you want to implement your own zoom controls.